<template>
    <div class="container-header">
        <div class="container-title">
            <span v-for="(item, index) in $store.state.titles" :key="index" :class="{
                'title-first': $store.state.titles.length === 1,
                'title-last': $store.state.titles.length > 1 && index != 0,
                title:
                    $store.state.titles.length > 1 &&
                    index < $store.state.titles.length - 1
            }" @click="goNav(index)">{{ item }}</span>
        </div>
        <div class="user-box">
            <!-- ref="buttonRef" v-click-outside="isDownload = !isDownload" -->
            <!--   -->
            <div class="parent">
                <div v-if="user.isPcAdmin" class="bi-button fs-16 flex flex-ai-c flex-jc-c mg-r-10 pointer"
                     @click="toBI">
                    <img src="../assets/img/bi/entry-logo.png" alt="" class="entry-logo">
                    <div class="mg-l-5 fs-12 mg-t--5">动态数据大屏</div>
                </div>
                <div v-if="showHint" class="hint-box">
                    <el-carousel class="flex-1" height="30px" indicator-position="none" direction="vertical" motion-blur
                                 :autoplay="false" interval="2000">
                        <el-carousel-item v-for="item in hintList" class="hint-item" :key="item">
                            <div>{{ item }}</div>
                        </el-carousel-item>
                    </el-carousel>
                    <el-icon class="pointer" @click="onCloseHint">
                        <Close/>
                    </el-icon>
                </div>
            </div>
            <div v-if="isOpenPaySalary" class="cus-btn pointer mg-r-16" @click="showDialog = true">产品续费</div>
            <el-popover placement="bottom-end" :visible="isDownload" :width="400">
                <template #reference>
                    <div class="download-center point fs-14" @click="onIsDownload">
                        <!-- onGoDownload-->
                        下载中心
                    </div>
                </template>
                <div class="center">
                    <div class="top-center row-between" @click="
                        $router.push({
                            path: '/download'
                        })
                        ">
                        <div class="fs-14">
                            下载中心
                        </div>
                        <div>
                            <img src="../assets/common/arrow.png" class="arrow-img" alt="">
                        </div>
                    </div>
                    <div v-if="fileList.length === 0">
                        <el-empty description="暂无下载"/>
                    </div>
                    <div class="list-center" v-for="(item, index) in fileList" :key="index">
                        <div class="center-i">
                            <div class="align-items">
                                <!-- <img src="" /> -->
                                <img src="../assets/common/img-xisx.png" v-if="item.fileName.includes('.xlsx')"
                                     class="img" alt=""/>
                                <img src="../assets/common/img-png.png" v-else class="img" alt=""/>
                                <!-- img-png -->
                                <div>{{ item.fileName }}</div>
                            </div>
                            <div class="state">
                                {{ item.fileUrl ? '下载中' : '生成中' }}
                            </div>
                        </div>
                    </div>
                </div>
            </el-popover>
            <el-popover
                placement="bottom"
                :width="330"
                trigger="click"
            >
                <div class="w-330px">
                    <div class="flex flex-center bg-blue">
                        <img class="user-avatar" :src="$store.state.avatar"/>
                        <div>
                            <div class="user-name">{{ $store.state.nickName }}</div>
                            <div class="user-name">{{ $store.state.companyName }}</div>
                        </div>
                    </div>
                    <el-popover
                        @show="onEnter"
                        placement="left"
                        :width="330"
                        trigger="click"
                    >
                        <div class="w-330px">
                            <div class="company-list-box">
                                <div class="itembox" v-for="(item, i ) in companyList" :key="i"
                                     @click="sureLogin(item.companyId)">
<!--                                    <div class="tag" v-if="item.isSelected === 1">上次登陆</div>-->
                                    <div class="flex gap-10 flex-ai-c">
                                        <img src="../assets/common/companyicon.png" class="w-h-32" alt="">
                                        <div>
                                            <div class="text-14">{{ item.companyName }}</div>
                                            <div class="flex flex-ai-c gap-10">
                                                <div class="tagstatus1" v-if="item.auditStatus"><img
                                                    src="../assets/common/success.png" class=" w-h-12" alt="">已认证
                                                </div>
                                                <div class="tagstatus2" v-if="!item.auditStatus"><img
                                                    src="../assets/common/err.png"
                                                    class=" w-h-12" alt="">未认证
                                                </div>
                                                <div class="companysupname">主管理员：{{ item.superAdminName }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <img v-if="item.isNowLogin" src="../assets/long-insure/success.png" class="w-h-16" alt="">
                                </div>

                            </div>
                        </div>
                        <template #reference>
                            <div class="popflex">
                                <div class="h-56">切换企业</div>
                                <img src="../assets/img/bi/gd.png" alt="" class="w-h-24">
                            </div>
                        </template>
                    </el-popover>
                    <div class="popflex" @click="modifyCode">
                        <div class="h-56">修改密码</div>
                        <img src="../assets/img/bi/gd.png" alt="" class="w-h-24">
                    </div>
                    <div class="popflex" @click="exit">
                        <div class="h-56">退出登录</div>
                        <img src="../assets/img/bi/gj.png" alt="" class="w-h-24">
                    </div>
                </div>
                <template #reference>
                    <div class="el-dropdown-link container-user">
                        <img class="user-avatar" :src="$store.state.avatar"/>
                        <span class="user-name">{{ $store.state.nickName }}</span>
                        <div class="triangle"></div>
                    </div>
                </template>
            </el-popover>
        </div>
    </div>
    <component-tabs/>
    <dialogRecharge v-model:show="showDialog" @changeTab="handleChangeTab"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import user from '@/utils/user'
import store from '@/store'
import componentTabs from '@/components/tabs.vue'
import { dateFormat } from '../utils/util'
import dialogRecharge from '@/components/seat/dialog-recharge.vue'
import screenfull from 'screenfull/dist/screenfull'
import { CompanyItemDto, getCompanyListApi } from '@/api/alipay-recharge'

export default defineComponent({
    data() {
        return {
            companyList: [] as CompanyItemDto[],
            userIcons: '',
            $store: store,
            isDownload: false,
            fileList: [] as any,
            typeArr: [
                '发薪单列表',
                '发薪明细',
                '对账单',
                '工资单',
                '领薪记录',
                '个人领薪记录',
                '归档管理',
                '合同列表',
                '批量投保明细',
                '日保列表',
                '充值记录',
                '下载中心',
                '长期保员工名单',
                '日保在保人员名单',
                '长期保在保人员名单',
                '人员维度子弹回单',
                '长期保充值记录'
            ],
            secondary: {
                pay: '发薪充值记录',
                insurance: '日日保充值记录',
                sign: '电子签充值记录',
                period: '长期保充值记录'

            } as any,
            showDialog: false,
            isOpenPaySalary: false,
            hintList: [
                '随时掌握职工动态',
                '一键启动大屏招聘',
                '实力尽显，不止于屏'
            ],
            showHint: localStorage.getItem('closeBigScreenHint') !== 'true' ?? true,
            user: user
        }
    },
    async mounted() {
        await user.waitLogin()
        if (user.isOpenPaySalary) {
            this.isOpenPaySalary = user.isOpenPaySalary
        }
    },
    async created() {
        setTimeout(() => {
            this.isDownload = !!(store.state.fileList.length > 0 || this.isDownload)
        }, 1000)
    },
    watch: {
        // 监听 fileList 的变化 根据他的变化 做出修改
        '$store.state.fileList': {
            deep: true, // 深度监听设置为 true
            handler: function (newVal, oldVal) {
                console.log('数据发生变化啦') // 修改数据时，能看到输出结果
                console.log(newVal, oldVal)
                const arr = [...newVal]
                console.log(arr, 'arrarrarr')
                this.fileList = []
                this.isDownload = !!(newVal.length > 0 || this.isDownload)
                // this.fileList.push(...newVal)
                console.log(store.state.fileCloneList, 'fileCloneList')
                store.state.fileCloneList.forEach((item: any) => {
                    console.log(item, 'item')
                    if (arr.length === 0) {
                        this.fileList = []
                        return
                    }
                    arr.forEach((ite: any, index: number) => {
                        if (ite.id === item.id) {
                            this.fileList.push(ite)
                            this.fileList[index].fileName = (item.exportType - 1 === 10 ? this.secondary[`${item.remark}`] : this.typeArr[item.exportType - 1]) + '_' + dateFormat('YYYY-mm-dd HH:MM:SS', new Date(item.updateTime)) + (item?.type ? '.zip' : '.xlsx')
                            console.log(this.fileList, index, '每一次循环赋值的东西')
                        }
                    })
                })
                console.log(this.fileList, '看看其他的东西')
                this.isDownload = !!(store.state.fileList.length > 0)
            }
        },
        // isDownload
        '$store.state.isDownload': {
            deep: true, // 深度监听设置为 true
            handler: function (newVal, oldVal) {
                this.isDownload = false
                // console.log(newVal, oldVal, '监听到啦')
            }
        },
        '$store.state.isOpenRecharge': {
            handler: function (newval) {
                this.showDialog = true
            }
        }
    },
    components: {
        'component-tabs': componentTabs,
        dialogRecharge
    },
    methods: {
        async onEnter() {
            let commonlyList = await getCompanyListApi({ userId: user.userId })
            console.log(commonlyList, 'commonlyListcommonlyListcommonlyList')
            this.companyList = commonlyList as CompanyItemDto[]
        },
        async sureLogin(id: string | number) {
            await user.switchLogin({
                username: user.phone,
                companyId: id
            })
            window.location.reload()
        },
        onGoDownload() {
            console.log('跳转')
            store.commit('ces')
        },
        // download-zone
        exit() {
            user.exit()
        },
        goNav(index: number) {
            this.$router.go(-(store.state.titles.length - index - 1))
        },
        onIsDownload() {
            console.log(this.$store.state.fileList, '看看是什么类型')
            if (this.$store.state.fileList.length === 0 || this.$store.state.fileList.length === undefined) {
                this.$router.push({
                    path: '/download'
                })
                return
            }
            this.isDownload = !this.isDownload
        },
        // delTab (page:string, name:string) {
        //     console.log({ page, name }, 'obj')
        //     store.commit('delPage', { page, name })
        // },
        // goTabPage (path:string) {
        //     this.$router.push({
        //         path: path
        //     })
        // },
        modifyCode() {
            this.$router.push({
                path: '/code/change'
            })
        },
        handleChangeTab(ev: string) {
            this.$emit('changeTab', ev)
        },
        toBI() {
            this.$router.push({
                path: '/bigScreen'
            })
            setTimeout(() => {
                (screenfull as any).toggle(store.state.fullScreenContainer)
            }, 200)
        },
        onCloseHint() {
            this.showHint = false
            localStorage.setItem('closeBigScreenHint', 'true')
        }
    }
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.container-header
    space-between()
    // margin-top 12px
    padding-right 10px

.container-title
    font-size 20px

    .title
        color color-grey
        cursor pointer

    .title-last
        cursor pointer

    .title-last:before
        content '/'
        display inline-block
        margin: 0 5px

.container-user
    display flex
    align-items center

.user-avatar
    width 44px
    height 44px
    border-radius 44px
    margin 0 12px 0 6px
    border 1px solid #DFE0EB

.triangle
    margin-left 8px

.tagsPages
    display flex
    border 1px solid #DFE0EB
    display inline-flex
    border-radius 4px
    padding 2px
    box-sizing border-box

    .pages
        padding 9px 15px
        box-sizing border-box
        min-width 102px
        text-align center
        color color-black
        background #fff

    .active
        background #E8F3FE
        color #1989FA

.alert-box
    padding 0 30px 30px 30px
    box-sizing border-box

.user-box
    display flex
    align-items center

    .download-center
        background #D6E8FF
        width 112px
        height 40px
        border-radius 30px
        color #3D8AF2
        font-size 14px
        text-align center
        line-height 40px
        margin-right 16px

    .center
        width 335px

.list-center
    padding-top 16px

    .center-i {
        color #202536
        font-size 14px
        padding-bottom 16px
    }

    .img {
        margin-right 16px
        width 16px
        height 18px
    }

    .state {
        color #00D679
        font-size 12px
        padding-left 32px
        margin-top 5px
    }

    .state-active {
        color #9597AF
    }

.top-center
    padding-bottom 16px
    border-bottom 1px solid #F7F8FC
    font-size 14px
    color rgba(0, 0, 0, 0.65)

.arrow-img
    width 14px
    height 14px

.cus-btn
    height 40px
    line-height 40px
    padding 0 24px
    border-radius 20px
    color #fff
    background linear-gradient(105deg, #8CA0FF -13%, #9DAEFF 2%, #72ADFE 24%, #43A4FC 60%, #A9E2FF 108%, #AAE3FF 117%)

.bi-button
    width 122px
    height 40px
    background url('../assets/img/bi/entry-button.png') no-repeat
    background-size contain
    color #3D8AF2

.entry-logo
    width 16px
    height 16px

.mg-t--5
    margin-top -3px

.parent
    position relative

.hint-box
    width 100%
    position absolute
    bottom -50px
    right 20px
    height 30px
    line-height 30px
    display flex
    justify-content space-between
    align-items center
    background #fff
    padding 0 10px
    box-sizing content-box
    border-radius 5px
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.1))

    &::after
        content ''
        position absolute
        right 20px
        top -10px
        width 0
        height 0
        border 5px solid
        border-top-color transparent
        border-bottom-color #fff
        border-left-color transparent
        border-right-color transparent

.w-330px
    width 330px

.w-h-24
    width 24px
    height 24px

.popflex
    cursor pointer
    height 56px
    display flex
    align-items center
    justify-content space-between

.bg-blue
    color #FFFFFF
    background-color #1989FA
    padding 20px
    border-radius 8px

.tag
    position absolute
    width 48px
    height 20px
    border-top-right-radius 8px
    border-bottom-left-radius 8px
    background-color rgba(25, 137, 250, .2)
    font-size 10px
    color rgba(25, 137, 250, 1)
    boxs-sizing border-box
    top 0
    right 0
    display flex
    align-items center
    justify-content center

.company-list-box
    width 100%
    box-sizing border-box
    display flex
    flex-direction column
    gap 12px
    height 205px
    overflow-y scroll
    scrollbar-width none /* Firefox */
    -ms-overflow-style none

/* IE 10+ */
.company-list-box::-webkit-scrollbar
    display none

.companysupname
    color #565868
    font-size 12px

.w-h-12
    width 12px
    height 12px

.w-h-16
    width 16px
    height 16px

.tagstatus2
    width 60px
    height 18px
    border-radius 8px
    background-color rgba(86, 88, 104, .2)
    font-size 10px
    color #565868
    boxs-sizing border-box
    display flex
    align-items center
    justify-content center

.tagstatus1
    width 60px
    height 18px
    border-radius 8px
    background-color rgba(25, 137, 250, .2)
    font-size 10px
    color rgba(25, 137, 250, 1)
    boxs-sizing border-box
    display flex
    align-items center
    justify-content center

.itembox
    width 100%
    box-sizing border-box
    height 68px
    background-color rgba(238, 238, 238, 0.5)
    border-radius 8px
    padding 16px 16px 16px 12px
    position relative
    display flex
    align-items center
    justify-content space-between
</style>
